<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
      <el-breadcrumb-item>成绩列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row type="flex" justify="center" align="center">
        <el-col :span="2"> 方式一： </el-col>
        <el-col :span="12">
          <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
        </el-col>
        <el-col :span="3"> 方式二： </el-col>
        <el-col :span="6" style="margin-top: 70px">
          <el-button type="primary" @click="OutImportdialogVisible=true">通过外部链接导入<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" height="800px" border highlight-current-row stripe :header-cell-style="table_header" style="width: 100%;margin-top:20px;">
        <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" align="center"/>
      </el-table>
    </el-card>


    <el-dialog
            title="请输入外部链接url"
            :visible.sync="OutImportdialogVisible"
            width="30%"
            :before-close="resetForm">
      <el-form ref="form" :model="OutImportForm" label-width="80px">
        <el-form-item label="链接地址">
          <el-input v-model="OutImportForm.url"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="OutImportdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="OutImportdialogVisible = false">确 定</el-button>
          </span>
    </el-dialog>

  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: [],
      OutImportForm: {
        url:'',
      },
      OutImportdialogVisible: false,
    }
  },
  methods: {
    table_header(row, column, rowIndex, columnIndex) {
      return 'background-color: #409EFF; color:white'
    },
    resetForm(){
      this.OutImportForm = {};
      this.OutImportdialogVisible = false
    },
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        return true
      }
      this.$message.warning('上传文件不能大于1M');
      return false
    },
    handleSuccess({ results, header }) {
      this.tableData = results;
      this.tableHeader = header;
    }
  }
}
</script>
